<template>
    <!-- 箭头组件 -->
    <!-- @mouseenter="isHovered = true" @mouseleave="isHovered = false" -->
    <div class="arrow-container">
        <svg :class="{ 'arrow-up': isHovered }" style="color: red;" :width="width" :height="height" t="1747725633983"
            class="icon arrow-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="866">
            <path
                d="M490.666667 640L682.666667 448l-29.866667-29.866667-162.13333299 162.133334-162.13333401-162.133334-29.866666 29.866667L490.666667 640z"
                :fill="color" p-id="867"></path>
        </svg>
    </div>
</template>

<script>
export default {
    name: 'Arrows',
    // 宽 搞 颜色
    props: ['width', 'height', 'color', 'isHovered'],
    data() {
        return {
        }
    }
}
</script>

<style scoped>
.arrow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.arrow-icon {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.arrow-icon.arrow-up {
    transform: rotate(180deg);
}
</style>